<template>
	<view class="page-nearby">
		<swiper class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index" @click="onDetail(item)">
				<view class="sc">
					<view class="swiper-image-section">
						<image class="swiper-image" :src="item.spaceImgUrl" mode="aspectFill"></image>
					</view>
					<view class="swiper-content">
						<view class="name">
							<text>{{ item.spaceName }}</text>
							<button class="clockBtn" type="default">{{ item.accessRightsDesc }}</button>
						</view>
						<view class="swiper-tag" v-if="item.labelList && item.labelList.length > 0">
							<u-tag shape="circle" v-for="(label, l) in item.labelList" :key="l" :text="label" bg-color="#FFFAD3" border-color="#FFFAD3" color="#FF7B02" />
						</view>
						<view class="swiper-text u-line-4">
							{{ item.spaceBriefIntroduction || '' }}
						</view>
						<view class="swiper-address">
							<view class="address-text">
								<view class="icon_address"></view>
								<text class="address_text"> {{ item.address }}</text>
							</view>
							<view class="address-length">{{ item.distanceM | distance }}</view>
						</view>
						<view class="swiper-bottom">
							<view class="swiper-option">
								<u-icon :name="iconLook" :size="40"></u-icon>
								<view class="grid-text">{{ item.browseCount }}</view>
							</view>
							<view class="swiper-option">
								<u-icon :name="iconBubbles" :size="40"></u-icon>
								<view class="grid-text">{{ item.bubbleCount }}</view>
							</view>
							<view class="swiper-option">
								<u-icon :name="iconFire" :size="40"></u-icon>
								<view class="grid-text">{{ item.vitalityValue }}</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sc space-item">
					<view class="space_img">
						<image src="../../../static/emtpy/empty_space.png"></image>
					</view>
					<view class="space_head">
						创建空间
						<view class="t_head">
							附近没有想要的主题空间<br />
							快来创建属于自己的空间吧！
						</view>
					</view>
					<view class="space_tips">
						创建1个泡泡空间，需消耗30个金币<br />
						仅可查看当前位置附近10个泡泡空间
					</view>
					<view class="space-btn">
						<button type="default" class="recharge_coin" @click="createSpace">开始创建</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-modal
		    class="delete-container"
		    v-model="showLogin"
			title="登录提示"
		    content="请确认是否授权登录账号？"
		    confirm-text="立即登录"
			confirm-color="#FED034"
		    cancel-text="暂不登录"
		    :show-cancel-button="true"
		    @confirm="login"
		    @cancel="showLogin = false"
		></u-modal>
	</view>
</template>

<script>
	import UserLogin from '@/common/js/login'
	import storage from '@/common/js/storage';
	import { mapState } from 'vuex'
	export default {
		mixins: [UserLogin],
		name:"page-nearby",
		data() {
			return {
				iconLook: require('../../../static/header/icon_eye_black.png'),
				iconBubbles: require('../../../static/header/icon_bubbles_black.png'),
				iconFire: require('../../../static/header/icon_fire_black.png'),
				list: [],
				showLogin: false,
				goType: null
			};
		},
		computed: {
			...mapState(['isLoginStatus']),
		},
		async mounted() {
			await this.__init()
		},
		methods: {
			async __init() {
				if(this.addressInfo.lat && this.addressInfo.lng) {
					await this.getNearbySpace()
				}
			},
			login() {
			    this.getUserInfo(() => {
			        this.$u.toast('登录成功');
					if(this.goType == 'create') {
						setTimeout(() => {
							this.createSpace()
						}, 500)
					}
			    })
			},
			createSpace() {
				// 创建空间
				if(!this.isLoginStatus) {
					this.showLogin = true
					this.goType = 'create'
					return
				}
				this.$u.route('/pages/createSpace/createSpace')
			},
			async getNearbySpace() {
				let addressInfo = this.addressInfo
				await this.$u.get('/paopao/mini/space/queryNearbySpace', {
					lat: addressInfo.lat,
					lng: addressInfo.lng
				}).then(res => {
					this.list = res.items
					// this.list = []
				})
			},
			onDetail(item) {
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				this.$u.route('/pages/mySpace/spaceDetail', {
					id: item.id,
					distanceM: item.distanceM
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import url("../../../common/css/var.less");
.page-nearby {
	position: relative;
	// padding-bottom: 48rpx;
	margin-bottom: 48rpx;
}
.swiper {
	margin: 0 12rpx;
	min-height: 846rpx;
	// box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.05);
	background: #F7F7F7;
	border-radius: 32rpx;
	position: relative;
	z-index: 10;
	.sc {
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 32rpx;
		background-color: #fff;
		overflow: hidden;
	}
	.swiper-item {
		border-radius: 32rpx;
	}
	.swiper-content {
		padding: 0 32rpx;
	}
	.swiper-image-section {
		width: 100%;
		height: 456rpx;
		overflow: hidden;
		.swiper-image {
			width: 100%;
			min-height: 348rpx;
		}
	}
	.name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 24rpx;
	}
	.clockBtn {
		width: 120rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 36rpx;
		background-color: @mColor !important;
		color: @mText;
		font-size: 28rpx;
	}
	.swiper-tag {
		padding-top: 16rpx;
		u-tag {
			font-size: 24rpx;
			margin-right: 16rpx;
		}
	}
	.swiper-text {
		margin-top: 24rpx;
		font-size: 28rpx;
		line-height: 44rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.swiper-address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 24rpx;
		.address-text {
			display: flex;
			align-items: center;
		}
		.icon_address {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			background: url(../../../static/header/icon_point.png) no-repeat center;
			background-size: contain;
		}
		.address_text {
			color: @mText;
			font-size: 28rpx;
			padding-left: 6rpx;
			max-width: 408rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	.swiper-bottom {
		margin-top: 32rpx;
		// border-top: 2rpx solid #e6e6e6;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.swiper-option {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0 32rpx;
		color: @tText;
		font-size: 28rpx;
		u-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
	}
}
.space-item {
	padding: 36rpx 48rpx;
	text-align: center;
	.space_img {
		width: 320rpx;
		height: 320rpx;
		margin: 0 auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.space_head {
		padding-top: 48rpx;
		font-size: 40rpx;
		color: @mText;
		.t_head {
			font-size: 32rpx;
			padding-top: 16rpx;
		}
	}
	.space_tips {
		font-size: 24rpx;
		color: @tText;
		padding-top: 16rpx;
		line-height: 1.5;
		padding-bottom: 45rpx;
	}
}
.space-btn {
	padding-top: 12rpx;
	background-color: #FFFFFF;
	.recharge_coin {
		line-height: 96rpx;
		background: @mColor !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: @mText;
		font-size: 36rpx;
	}
}
</style>
